import React, { lazy, memo, Suspense } from "react";
import { observer } from "mobx-react";
import layerManager from "../manager/LayerManager";
import rightStore from "../right/RightStore";
import eventOperateStore from "../operate-provider/EventOperateStore";
import { hotkeyConfigs } from "../operate-provider/hot-key/HotKeyConfig";
import layerBuilder from "../left/layer-list/LayerBuilder";
import LayerUtil from "../left/layer-list/util/LayerUtil";
import DesignerMovable from "../operate-provider/movable/DesignerMovable";
import Loading from "../../json-schema/ui/loading/Loading";
import SearchLayer from "../left/layer-list/search-layer/SearchLayer";

const DesignerContainer = lazy(
  () => import("../operate-provider/DesignerContainer")
);
const DesignerRuler = lazy(() => import("./DesignerRuler"));
const GroupSelectable = lazy(
  () => import("../operate-provider/movable/DesignerSelectable")
);
const ContextMenu = lazy(
  () => import("../operate-provider/canvas-context-menu/CanvasContextMenu")
);
const HotKey = lazy(() => import("../operate-provider/hot-key/HotKey"));
const DesignerDragScaleContainer = lazy(
  () => import("./DesignerDragScaleContainer")
);

const DesignerCanvas = memo(
  observer(
    (props: {
      view?: boolean; // 是否为预览模式
      // 比例
      scale?: number;
      id?: string;
      // 锁定
      lock?: boolean;
      width?: number;
      height?: number;
    }) => {
      const updateActive = (e: React.MouseEvent) => {
        let { targetIds } = eventOperateStore;
        const { activeElem, activeConfig } = rightStore;
        if (targetIds.length === 0) {
          activeConfig(null, "");
          return;
        }
        // 如果没有按下shift键，则进行分组场景下的计算，反之则直接选中激活组件配置
        if (!e.shiftKey)
          targetIds = LayerUtil.findTopGroupLayer(targetIds, true);
        if (targetIds.length !== 1) return;
        const layerId = targetIds[0];
        const { layerConfigs } = layerManager!;
        const layer = layerConfigs[layerId];
        if (layerId === activeElem.id) return;
        activeConfig(layerId, layer.type!);
      };
      const { layerConfigs } = layerManager!;
      return (
        <Suspense fallback={<Loading />}>
          <DesignerContainer>
            <GroupSelectable view={props.view}>
              {props?.view ? (
                <DesignerDragScaleContainer
                  width={props.width}
                  height={props.height}
                  backgroundColor="transparent"
                  id={props.id}
                  lock={props.lock}
                >
                  {layerBuilder.buildCanvasComponents(layerConfigs)}
                </DesignerDragScaleContainer>
              ) : (
                <DesignerRuler>
                  <DesignerDragScaleContainer onDoubleClick={updateActive}>
                    <DesignerMovable>
                      {layerBuilder.buildCanvasComponents(layerConfigs)}
                    </DesignerMovable>
                  </DesignerDragScaleContainer>
                </DesignerRuler>
              )}
            </GroupSelectable>
          </DesignerContainer>
          {!props.view && <ContextMenu />}
          {!props.view && <HotKey handlerMapping={hotkeyConfigs} />}
          {!props.view && <SearchLayer />}
        </Suspense>
      );
    }
  )
);

export default DesignerCanvas;
